<template>
  <div>
    <div class="shop-header-container">
      <div class="shop-header-background" :style="headerStyle"></div>
      <div class="shop-header-main"><img class="shop-header-logo" :src="logoURL">
        <div class="shop-header-content">
          <h2 class="shop-header-shopName">{{shop.name}}</h2>
          <p class="shop-header-delivery"><span class="shop-header-deliveryItem">商家配送</span> <span class="shop-header-deliveryItem">{{shop.order_lead_time}}分钟送达</span><span class="shop-header-deliveryItem" v-if="shop.piecewise_agent_fee">{{shop.piecewise_agent_fee.description}}</span></p>
          <div class="shop-header-notice"><span>公告：</span> <span>{{shop.promotion_info}}</span></div>
        </div>
      </div>
      <div class="shop-header-activities">
        <div class="activity-container activity-containerNoWrap shop-header-activityRow"><i class="activity-activityIcon" style="background-color: rgb(112, 188, 70); color: rgb(255, 255, 255);"><span>首</span></i>                  <span class="activity-description">新用户下单立减18.0元(不与其它活动同享)</span></div>
        <div class="shop-header-activityCount">10个活动</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ShopHeader',
    data () {
      return {
      }
    },
    props: {
      shop: {
        type: Object
      }
    },
    computed: {
      logoURL: function () {
        if (this.shop.image_path) {
            return 'https://fuss10.elemecdn.com/9/ec/' + this.shop.image_path.substring(3) + '.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
        }
      },
      headerStyle: function () {
        if (this.shop.image_path) {
          //background-image: url("https://fuss10.elemecdn.com/9/ec/1f13f62196de7301242a6cebbc8e0png.png?imageMogr/format/webp/thumbnail/!40p/blur/50x40/");
          return 'background-image: url("https://fuss10.elemecdn.com/9/ec/' + this.shop.image_path.substring(3) + '.png?imageMogr/format/webp/thumbnail/!40p/blur/50x40/");'
        }
      }
    }
  }
</script>

<style>

</style>

